<template>
  <div ref="wrapper" class="scroll">
    <div class="scroll-center">
      <div v-if="pulldown" class="refresh" :class="{'load':Refresh.class}"><i class="iconfont"
                                                              :class="Refresh.iconClass"></i>{{Refresh.text}}
      </div>
      <slot></slot>
      <div v-if="pullup" class="load-more" :class="{'load':LoadMore.class}"><i class="iconfont"
                                                                 :class="LoadMore.iconClass"></i>{{LoadMore.text}}
      </div>
    </div>
    <div class="scroll-top-wrapper" v-if="scrolltop">
      <v-scroll-top>
        <transition name="scrolltop-fade">
          <div class="center" v-show="showScrollTop" @click="scrolltoTop"><i class="iconfont icon-up_light"></i></div>
        </transition>
      </v-scroll-top>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
  import ScrollTop from 'base/scroll-top/scroll-top'
  import {scrollTop} from 'common/js/mixin'

  export default {
    mixins: [scrollTop],
    props: {
      probeType: {
        type: Number,
        default: 1
      },
      click: {
        type: Boolean,
        default: true
      },
      listenScroll: {
        type: Boolean,
        default: false
      },
      bounce: {
        type: Boolean,
        default: true
      },
      scrollX: {
        type: Boolean,
        default: false
      },
      scrollY: {
        type: Boolean,
        default: true
      },
      data: {
        type: [Array, Object],
        default: null
      },
      /**
       * 是否派发滚动到底部的事件，用于上拉加载
       * */
      pullup: {
        type: Boolean,
        default: false
      },
      /**
       * 是否派发顶部下拉的事件，用于下拉刷新
       * */
      pulldown: {
        type: Boolean,
        default: false
      },
      /**
      * 是否显示返回顶部
      * */
      scrolltop: {
        type: Boolean,
        default: false
      },
      beforeScroll: {
        type: Boolean,
        default: false
      },
      refreshDelay: {
        type: Number,
        default: 200
      }
    },
    data() {
      return {
        LoadMore: {
          text: '上拉加载更多',
          class: false,
          iconClass: 'icon-more-arrow'
        },
        Refresh: {
          text: '下拉刷新列表',
          class: false,
          iconClass: 'icon-refresharrow'
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          this._initScroll()
        }, 200)
      })
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            scrollX: this.scrollX,
            scrollY: this.scrollY,
            probeType: this.probeType,
            click: this.click,
            bounce: this.bounce,
            scrollbar: true,
            HWCompositing: true
          })
        } else {
          this.scroll.refresh()
        }

        if (this.listenScroll) {
          let _this = this
          this.scroll.on('scroll', (pos) => {
            this.scrollTop = pos.y
            _this.$emit('scroll', pos)
          })
        }
        // 是否派发滚动到底部事件，用于上拉加载
        if (this.pullup) {
          // 当滚动到可加载的地位置 派发事件 用于刷新Scroll 以保证可以显示正在加载中...
          this.scroll.on('scroll', (pos) => {
            if (pos.y <= this.scroll.maxScrollY - 50) {
              this.LoadMore.class = true
            }
          })
          // 当滚动到可加载的地位置且开始松手滚动事件后 派发事件 提交API加载数据
          this.scroll.on('touchEnd', (pos) => {
            if (pos.y <= this.scroll.maxScrollY - 50) {
              this.LoadMore.text = '正在加载中...'
              this.LoadMore.iconClass = 'icon-loading'
              this.$emit('loadMore')
            }
          })
        }
        // 是否派发顶部下拉事件，用于下拉刷新
        if (this.pulldown) {
          // 当下拉到可刷新的地位置 派发事件 用于刷新Scroll 以保证可以显示正在刷新中...
          /* this.scroll.on('scroll', (pos) => {
            if (pos.y > 50) {
              this.$emit('pulldown')
            }
          }) */
          this.scroll.on('touchEnd', (pos) => {
            // 下拉动作
            if (pos.y > 50) {
              this.Refresh.class = true
              this.Refresh.text = '正在刷新中...'
              this.Refresh.iconClass = 'icon-loading'
              this.$emit('reFresh')
            }
          })
        }
      },
      enable() {
        this.scroll && this.scroll.enable()
      },
      disable() {
        this.scroll && this.scroll.disable()
      },
      refresh() {
        this.scroll && this.scroll.refresh()
      },
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() {
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      },
      scrollToTop(time) {
        this.scrollTo(0, 0, time)
      },
      refreshOver(status) {
        if (status === true) {
          this.Refresh.class = false
          this.Refresh.text = '下拉刷新列表...'
          this.Refresh.iconClass = 'icon-refresharrow'
        }
      },
      loadMoreOver() {
        this.refresh()
        this.LoadMore.class = false
        this.LoadMore.text = '上拉加载更多'
        this.LoadMore.iconClass = 'icon-more-arrow'
      }
    },
    watch: {
      data() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.refresh()
          }, this.refreshDelay)
        })
      }
    },
    components: {
      'v-scroll-top': ScrollTop
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";
  .scroll {
    width:100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .load-more {
      position: absolute;
      left: 0;
      bottom: -30px;
      width: 100%;
      text-align: center;
      font-size: $font-size-medium;
      color: #666666;
      height: 20px;
      line-height: 20px;
      i {
        margin-right: 10px;
      }
      &.load {
        bottom: 0;
        position: static;
        height: 50px;
        line-height: 50px;
      }
    }
    .refresh {
      position: absolute;
      left: 0;
      top: -30px;
      width: 100%;
      text-align: center;
      font-size: $font-size-medium;
      color: #666666;
      height: 20px;
      line-height: 20px;
      i {
        margin-right: 10px;
      }
      &.load {
        bottom: 0;
        position: static;
        height: 50px;
        line-height: 50px;
      }
    }
    .scroll-top-wrapper {
      position: fixed;
      right: 15px;
      bottom: 50px;
      .center {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        color: $color-text-w;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        &.scrolltop-fade-enter-active, &.scrolltop-fade-leave-active {
          transition: all .5s;
        }
        &.scrolltop-fade-enter, &.scrolltop-fade-leave-to {
          opacity: 0;
        }
        i {
          font-size: $font-size-large-x;
        }
      }
    }
  }
</style>
